// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, TextInput, Image, TouchableOpacity, ImageBackground, ScrollView, Keyboard, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { cardDetail, cardCommentList, cardComment } from '../../../module/module.js'

// 引入样式
// import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList } from '../../../components/index.js'

// 引入专用组件
// import { } from './components'

// 引入工具包
import { u197, background } from '../../../util/images.js'
import { press, size, ScreenWidth, borderBottom, borderTop, pathHead, requestCardLike, requestCardFollowAccount, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../../util/utils.js'

class CommentList extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      detail: null,
      dataList: defaultDataList,
      content: '',
    }
  }

  componentDidMount() {
    this.handleData().finally(() => { Portal.remove(this.loading) })
  }

  handleData(options) {
    const { pid, id } = this.props
    const { dataList: { current, size } } = this.state
    return new Promise((resolve, reject) => {
      cardCommentList({
        cardId: pid,
        replyCommentId: id,
        ...defaultPage.call(this),
        ...options
      }).then(res => {
        concatDataList.call(this, res)
        resolve(res)
      }).catch(error => {
        reject(error)
      })
    })
  }

  onRefresh = () => {
    onRefresh.call(this)
  }

  onEndReached = () => {
    onEndReached.call(this)
  }

  render() {
    const { selectComment } = this.props
    const { dataList: { current, size, records, total }, refreshing, detail } = this.state
    return (
      <View style={{}}>
        {records.map((item, index) => {
          return (
            <TouchableOpacity
              onPress={() => {
                selectComment(item)
              }}
              style={{
                padding: 15,
                backgroundColor: '#fff',
                ...borderTop()
              }}
              key={index}
            >
              <View style={{}}>
                <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                  <CacheImage
                    resizeMod={"contain"}
                    style={{
                      marginRight: 5,
                      width: 22,
                      height: 22,
                      borderRadius: 10,
                      overflow: 'hidden'
                    }}
                    source={{ uri: `${pathHead}${item.avatar}` }}
                    
                  />
                  <Text style={{ flex: 1, fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>{item.nickname}</Text>
                </View>
                <View style={{ marginLeft: 27 }}>
                  <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>回复{item.replyNickname}：{item.content}</Text>
                </View>
                <View style={{ marginLeft: 27, flexDirection: 'row', alignItems: 'center', }}>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 14, }}>{item.createTime}</Text>
                  <Text style={{ fontSize: 10, color: '#61676F', lineHeight: 14, marginLeft: 10, paddingHorizontal: 8, paddingVertical: 5, backgroundColor: '#D8D8D8', borderRadius: 12 }}>{item.replyCount}回复</Text>
                </View>
              </View>
            </TouchableOpacity>
          )
        })}
        {records.length < total && (
          <TouchableOpacity onPress={() => {
            this.onEndReached()
          }}><Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>加载更多</Text></TouchableOpacity>
        )}
      </View>
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(CommentList))
